<template>
  <div class="page">
    <div class="icon">
      <div class="left">
        <img src="../assets/icon/zhifu.svg" alt="" />
      </div>
      <div class="msg">質押成功</div>
      <div class="msg_1">0.1 ETH</div>
      <div class="msg_2">0.0970975 WBETH 將會分發至您的現貨錢包。</div>
    </div>

    <div class="AnNiu">
      <div class="jiebi">
        <img
          src="../assets/icon/xianjin.svg"
          alt=""
          style="width: 30px; height: 30px; margin: 15px;"
        />
        <div class="collateral">
          幣安質押借幣<br /><span>使用 WBETH 作為借入加密貨幣的抵押品</span>
        </div>
        <img
          src="../assets/icon/right.svg"
          alt=""
          style="
            width: 15px;
            height: 15px;
            margin-top: 20px;
            margin-left: auto;
            margin-right: 5%;
          "
        />
      </div>
      <button class="btn">返回</button
      ><button
        class="btn"
        style="margin-left: 4%; background-color: #fcd434; color: black"
      >
        查看歷史
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "oneFour",
};
</script>

<style scoped>
.BAzhiya {
}
.msg {
  color: #ffffff;
  display: flex;
  font-size: 20px;
  justify-content: center;
  margin-top: 20px;
}
.msg_1 {
  color: #ffffff;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  font-size: 30px;
}
.msg_2 {
  display: flex;
  font-size: 12px;
  justify-content: center;
  color: #808791;
  margin-top: 20px;
}
.page {
  background-color: #21262f;
  padding: 0 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.jiebi {
  margin-top: auto;
  border: 0.5px solid #4c535c;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  /* justify-content: space-between; */
}
.jiebi .collateral {
  height: 52px;
  margin-top: 10px;
  font-size: 14px;
}
.jiebi .collateral span {
  font-size: 12px;
  color: #808791;
}
.AnNiu {
  margin-top: auto;
  margin-bottom: 10%;
}
.AnNiu .btn {
  margin-top: 10px;
  height: 40px;
  font-size: 16px;
  background-color: #434c5b;
  color: #ffffff;
  width: 48%;
  border: none;
  border-radius: 8px;
}
.icon .left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon .left img {
  width: 90px;
  height: 90px;
  margin-top: 30%;
  margin-bottom: 10px;
}
</style>
